<template>
	<div class="shopcart">
		<div class="content">
			<div class="content-left">
				<div class="logo-wrapper">
					<div class="logo">
						<i class="icon-shopping_cart"></i>
					</div>
					<div class="num">99</div>
				</div>
				<div class="price">￥{{totalPrice}}</div>
				<div class="desc">另需配送费￥{{deliveryPrice}}元</div>
			</div>
			<div class="content-right">
				<div class="pay" :class="payClass">{{payDesc}}</div>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	props:{
		deliveryPrice:Number,
		minPrice:Number,
	},
	computed : {
		totalPrice() {
			return 98;
		},
		payDesc() {
			if(this.totalPrice === 0){
				return `￥${this.minPrice}元起送`;
			} else if (this.totalPrice < this.minPrice){
				let diff = this.minPrice - this.totalPrice;
				return `还差￥${diff}元起送`;
			} else {
				return '去结算';
			}
		},
		payClass() {
			if(this.totalPrice < this.minPrice){
				return 'not-enough';
			} else {
				return 'enough';
			}
		}
	},

}
</script>

<style lang="stylus" scoped>
.shopcart
	position fixed
	left 0
	right 0
	bottom 0
	background-color #141d27
	color #fff
	height 48px
	.content
		color hsla(0,0%,100%,.4)
		display flex
		&-left
			display flex
			font-size 12px
			flex 1
		&-right
			width 105px
			line-height 48px
			height 48px
			font-size 12px
			text-align center
			font-weight 700
	.pay
		&.not-enough
			background-color #2b333b
		&.enough
			background #00b43c
			color #fff
	.logo-wrapper
		margin 0 12px
		background-color #141d27
		padding 6px
		width 56px
		height 56px
		position relative
		top -10px
		box-sizing border-box
		border-radius 50%
	.logo
		border-radius 50%
		text-align center
		background-color #2b343c
		&.highlight
			background-color #00a0dc
			i
				color #fff
	.num
		position absolute
		top 0
		right 0
		background #f01414
		padding 0 7px
		height 16px
		line-height 16px
		color #fff
		font-size 9px
		border-radius 16px
	.price
		line-height 24px
		height 24px
		margin-top 12px
		padding-right 12px
		border-right 1px solid hsla(0,0%,100%,.1)
		font-weight 700
		font-size 16px
	.desc
		line-height 24px
		height 24px
		margin-top 12px
		margin-left 12px
	.icon-shopping_cart
		line-height: 44px
		font-size 24px
		color #80858a
</style>

